<template>
	<div class="barrage-wrap"> 
		<div class="content-barrage" id="content-barrage"> 
			<!-- 我是弹幕层 --> 
			<!-- <div class="content-barrage-single"></div>  -->
		</div> 
	</div>
</template>
<script>

	export default {
		name: 'y-barrage',
		props: {
			barrageReleaseValue: String,
			barrageKid: Number,
		},
		data() {
			return {
				commentData: [],
				timerOpenBarrage: [],
				timerSetBarrage: []
			}
		},
		watch: {
			barrageKid: function (newValue, oldValue) {
				this.getComment(newValue)
			},
			
			barrageReleaseValue: function (newValue, oldValue) {
				if (newValue) {
					this.setBarrage(newValue, 0, 0, 0, 0, 'mine');
				}
			}
		},
		methods: {
			clear() {
				this.timerOpenBarrage.forEach(timer => {
				timer && clearTimeout(timer)
			});
			this.timerSetBarrage.forEach(timer => {
				timer && clearTimeout(timer)
			});
			},
			// 获取指定范围的随机数
			random(start, end) {
				let num = (Math.random() * (end - start) + start).toString();
				return parseInt(num, 10);
			},
			// 添加一个弹幕 弹幕内容, 点赞数,  是否点赞,  评论kid, 评论发布的用户, 类型(是否是自己发布的评论)
			setBarrage(text, count, likeResult,  commentKid, createUserId, type) {
				// 创建dom并添加class 和各种数据
				// 单个弹幕wrap
				let barrageWrap = document.createElement('div');
				barrageWrap.className = 'content-barrage-wrap';
				// 弹幕文本
				let barrage = document.createElement('span');
				barrage.className = "content-barrage-single";
				if (type === 'mine') {
					barrage.className = "content-barrage-single obvious-color";
				}
				barrage.innerText = text.replace(/\r/gi, '\n');
				// 弹幕点赞Icon
				let likeDom = document.createElement('span');
				likeDom.className = "iconfont icon-like";
				if (likeResult) {
					likeDom.className = "iconfont icon-like hasLiked";
				}
				
				// 弹幕点赞
				let likeCount = document.createElement('span');
				likeCount.className = "count";
				likeCount.innerText = count ? count : '';

				barrageWrap.onclick = (e) => this.handleLike(commentKid, count, likeResult, createUserId, e);
				document.getElementById('content-barrage').appendChild(barrageWrap);
				barrageWrap.appendChild(barrage);
				barrageWrap.appendChild(likeDom);
				barrageWrap.appendChild(likeCount);

				// 创建弹幕从右到左面的10-15的随机秒数
				const randomTime = this.random(10, 15);
				// 创建离上方的距离  百分比;
				const randomTop = this.random(0, 80);
				barrageWrap.style.top = randomTop + "%";
				// 添加一个定时器 在运行完成之后删除这个DOM
				this.timerSetBarrage.push(setTimeout(() => {
					let dom =	document.getElementById('content-barrage')
					let child = dom.children[0]
					child && dom.removeChild(child)
				}, 5 * 1000))
			},

			openBarrage() {
				for (let i in this.commentData) {
					this.timerOpenBarrage.push(setTimeout(() => {
						if (i < this.commentData.length) {
							let {content, statisticResult, behaviorResult, createUserId, kid} = this.commentData[i];
							this.setBarrage( content, statisticResult.likeCount, behaviorResult.likeFlag, kid, createUserId);
							i++;
						}
					}, i * 2000))
				}
			},

			async getComment(targetKid) {
				if (targetKid > 0) {
					let params = {
						targetKid,
						targetType: 'museumThing'
					}
					let res = await this.$http.get(`/platform-behavior/v1.3/pb/comment-info/action/search-root`, {params});
					this.clear();
					this.commentData = res.data.data.entities;
					this.openBarrage();
				}
			},

			async handleLike( commentKid, likeCount, likeResult, createUserId, e) {
				let params = {
					actionType: 'like',
					targetKid: commentKid,
					targetUserId: createUserId,
					targetType: 'comment',
					sync: true,
				}
				let lastElementChild = e.target.lastElementChild;
				if (likeResult) {
					let res = await this.$http.delete(`/platform-behavior/v1.3/pt/user-behavior`, {data: params});
					if (likeCount > 1) {
						lastElementChild.innerHTML = parseInt(likeCount) - 1;
					} else {
						lastElementChild.innerHTML = ''
					}
					lastElementChild.previousElementSibling.className = "iconfont icon-like"
				} else {
					let res = await this.$http.post(`/platform-behavior/v1.3/pt/user-behavior`, params);
					lastElementChild.innerHTML = parseInt(likeCount) + 1;
					lastElementChild.previousElementSibling.className = "iconfont icon-like hasLiked"
				}
			}
		},

		beforeDestroy() {
			this.clear();
		},

		mounted() {
			this.getComment(this.barrageKid);
		}
	}
</script>
<style>
.barrage-wrap {
	width: 100%;
	height: 2.9rem;
	& .content-barrage {
		height: 2.9rem;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	& .content-barrage-wrap {
		background: rgba(0, 0, 0, 0.5);
    border-radius: 0.22rem;
		padding: 0.12rem 0.4rem;
		animation: barrage 5s linear;
		transition: all 0.3s;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 0.26rem;
		line-height: 0.3rem;
		color: #fff;
		height: 0.5rem;
		overflow-y: hidden;
	}

	& .icon-like {
		font-size: 0.26rem;
		line-height: 0.3rem;
		margin-left: 0.1rem;
		&.hasLiked {
			color: #ffcc1c;
		}
	}

	& .content-barrage-single {

		max-width: 3.4rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.obvious-color {
			color: #ffcc1c;
		}
	}

	& .icon-laud, & .count {
		margin-left: 0.1rem;
	}
}

/*  为了防止突兀的出现 现在是从又到左面的负一屏 但是影响性能 可以根据自己的业务场景修改 */
@keyframes barrage {
	from { 
		left: 100%; 
		transform:translate3d(0,0,0);}
	to { 
		left:0;
		transform:translateX(-100%) }
}
	
</style>